import React from 'react';
import {
  Table,
  Button,
  Divider,
  Modal,
} from 'antd';
import LiftingCreateForm from './CreateForm';
import LiftingUpdateForm from './UpdateForm';

export default class Lifting extends React.Component {
  state = {
    loading: false,
    createModalVisible: false,
    updateModalVisible: false,
    liftingData: [
      {
        key: 1,
        name: '测试自提点',
        province: '浙江省',
        city: '杭州市',
        district: '拱墅区',
        address: '余杭塘路478号海蓝创智天地1号楼5楼503',
        telephone: '0571-88888888',
      },
    ],
    handleLifting: {},
  };

  handleLiftingDelete = (item, e) => {
    e.preventDefault();

    Modal.confirm({
      title: '删除提示',
      content: '确定删除自提点嘛？',
      okText: '确认',
      cancelText: '取消',
    });
  };

  handleLiftingEdit = (item, e) => {
    e.preventDefault();

    this.setState({
      handleLifting: item,
    });

    this.handleUpdateModalVisible(true);
  };

  handleCreateModalVisible = flag => {
    this.setState({
      createModalVisible: !!flag,
    });
  };

  handleUpdateModalVisible = flag => {
    this.setState({
      updateModalVisible: !!flag,
    });
  };

  render() {
    const { loading, createModalVisible, updateModalVisible, liftingData, handleLifting } = this.state;

    const createFormProps = {
      createModalVisible,
      handleCreateModalVisible: this.handleCreateModalVisible,
    };

    const updateFormProps = {
      updateModalVisible,
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleLifting,
    };

    const liftingColumns = [
      {
        key: 'name',
        title: '自提点名称',
        dataIndex: 'name',
      },
      {
        key: 'province',
        title: '省份',
        dataIndex: 'province',
      },
      {
        key: 'city',
        title: '城市',
        dataIndex: 'city',
      },
      {
        key: 'district',
        title: '地区',
        dataIndex: 'district',
      },
      {
        key: 'address',
        title: '详细地址',
        dataIndex: 'address',
      },
      {
        key: 'telephone',
        title: '联系电话',
        dataIndex: 'telephone',
      },
      {
        key: 'action',
        title: '操作',
        dataIndex: 'action',
        render: (text, record) => {
          return (
            <React.Fragment>
              <a href='#' onClick={this.handleLiftingEdit.bind(this, record)}>编辑</a>
              <Divider type='vertical' />
              <a href='#' onClick={this.handleLiftingDelete.bind(this, record)}>删除</a>
            </React.Fragment>
          );
        },
      },
    ];

    return (
      <React.Fragment>
        <Button
          style={{ marginBottom: 16 }}
          type='primary'
          icon='plus'
          onClick={this.handleCreateModalVisible.bind(this, true)}
        >
          新建自提点
        </Button>
        <Table
          loading={loading}
          bordered
          columns={liftingColumns}
          dataSource={liftingData}
        />
        <LiftingCreateForm {...createFormProps} />
        <LiftingUpdateForm {...updateFormProps} />
      </React.Fragment>
    );
  }
}
